/*! chengxue@bolean scss mixin 混合函数 */

// 宽，高
@mixin w-h($width: 100%, $height: $width) {
  width: $width;
  height: $height;
}

// 字体，颜色 默认值设置为文案主色、文案主字号
@mixin s-c($size: 14px, $color: #333) {
  font-size: $size;
  color: $color;
}

// 高，行高  可用于垂直居中（简陋手法）
@mixin h-lh($height: 36px, $line-height: $height) {
  height: $height;
  line-height: $line-height;
}

// 水平居中
@mixin x-center() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 垂直居中
@mixin y-center() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 水平垂直居中
@mixin x-y-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// flex 水平布局
@mixin flex-x($justify: space-between) {
  display: flex;
  align-items: center;
  justify-content: $justify;
}

// flex 垂直布局
@mixin flex-y($align-items: center) {
  display: flex;
  align-items: $align-items;
  justify-content: center;
}

// flex 水平垂直布局
@mixin flex-x-y($justify: space-between, $align-items: center) {
  display: flex;
  align-items: $align-items;
  justify-content: $justify;
}

// flex 水平垂直方向布局
@mixin flex-x-y-d($justify: space-between, $align-items: center, $direction: row) {
  display: flex;
  align-items: $align-items;
  justify-content: $justify;
  flex-direction: $direction;
}

// 背景图片
@mixin bg-img($url: require('../assets/logo.png')) {
  background-image: url($url);
}

// 背景图片充满
@mixin bg-img-full($position-x: left, $position-y: top) {
  background: {
    size: 100% 100%;
    repeat: no-repeat;
    position: $position-x $position-y;
  }
}

//
// 溢出省略号
// @param {Number} 行数
// 
@mixin ellipsis($rowCount: 1) {
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}


// 等边三角形
// @param {String} 尺寸
// @param {Color} 颜色
// @param {String} 方向

@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
  width: 0;
  height: 0;
  border-style: solid;

  @if (bottom==$dir) {
    border-width: $size $size 0 $size;
    border-color: $color transparent transparent transparent;
  }

  @else if (top==$dir) {
    border-width: 0 $size $size $size;
    border-color: transparent transparent $color transparent;
  }

  @else if (right==$dir) {
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent $color;
  }

  @else if (left==$dir) {
    border-width: $size $size $size 0;
    border-color: transparent $color transparent transparent;
  }
}

// loading
// @param {String} 圆的半径
@mixin loading-half-circle($width: 1em) {
  display: inline-block;
  height: $width;
  width: $width;
  border-radius: $width;
  border-style: solid;
  border-width: $width/10;
  border-color: transparent currentColor transparent transparent;
  animation: rotate 0.6s linear infinite;
  vertical-align: middle;
}


// 棋盘背景
// @param {Color} 背景色
@mixin bgChessboard($color: #aaa) {
  background-image: linear-gradient(45deg,
      $color 25%,
      transparent 25%,
      transparent 75%,
      $color 75%,
      $color),
    linear-gradient(45deg,
      $color 26%,
      transparent 26%,
      transparent 74%,
      $color 74%,
      $color);
  background-size: 10vw 10vw;
  background-position: 0 0, 5vw 5vw;
}



// 颜色透明
@mixin c-opacity($color, $opacity: 1) {
  color: rgba($color, $opacity);
}

// 背景颜色透明
@mixin bg-c-opacity($color, $opacity: 1) {
  background-color: rgba($color, $opacity);
}

// 边框颜色透明
@mixin b-c-opacity($color, $opacity: 1) {
  border-color: rgba($color, $opacity);
}

// 颜色混合
@mixin c-mixin($color-1, $color-2, $weight: .5) {
  color: mix($color-1, $color-2, $weight);
}

// 背景颜色混合
@mixin bg-c-mixin($color-1, $color-2, $weight: .5) {
  background-color: mix($color-1, $color-2, $weight);
}

// 边框颜色混合
@mixin bg-c-mixin($color-1, $color-2, $weight: .5) {
  border-color: mix($color-1, $color-2, $weight);
}

// 颜色变亮
@mixin c-light($color, $amount: .5) {
  color: lighten($color, $amount);
}

// 背景颜色变亮
@mixin bg-c-light($color, $amount: .5) {
  background-color: lighten($color, $amount);
}

// 边框颜色变亮
@mixin b-c-light($color, $amount: .5) {
  border-color: lighten($color, $amount);
}

// 颜色变暗
@mixin c-dark($color, $amount: .5) {
  color: darken($color, $amount);
}

// 背景颜色变亮
@mixin bg-c-dark($color, $amount: .5) {
  background-color: darken($color, $amount);
}

// 边框颜色变亮
@mixin b-c-dark($color, $amount: .5) {
  border-color: darken($color, $amount);
}

// 动画
@mixin ts($property, $time: .3, $delay: 0) {
  transition: {
    property: $property;
    duration: $time;
    delay: $delay;
  }
}